本节我们讲一下中间件，什么是中间件？大家如果接触过 express、koa 这类 node.js 框架，应该都会知道它们其实就是请求拦截器，当一个请求过来时，通过中间件可以增加自己的处理逻辑，相当于流水线上加一道“工序”。在 Nuxt 中也存在这种中间件机制，只不过被细分为两种：

• Route middleware：路由中间件；
• Server middleware：服务器中间件。

# 路由中间件

路由中间件并不是一定运行在客户端的中间件，而是运行在 Nuxt 应用中 Vue 渲染部分，路由中间件会在进入路由之前被调用，如果是 SSR，这个执行时刻既可能在服务端（首屏），也可能在客户端。

# 中间件类型

路由中间件根据影响范围和使用方式的不同，又分为三种：

• 匿名中间件：只影响一个页面，不可复用；
• 具名中间件：指定若干影响页面，可复用、组合；
• 全局中间件：影响所有页面，文件名需要加后缀 global。

# 中间件使用

匿名中间件用法，mid.vue：

javascript
复制代码definePageMeta({
  middleware(to, from) {
    console.log('匿名中间件，具体页面执行');
  }
})

具名中间件用法，mid.vue：

css
复制代码definePageMeta({
  middleware: ['amid', 'bmid']
})

定义具名中间件，amid.ts：

javascript
复制代码export default defineNuxtRouteMiddleware((to, from) => {
  console.log('具名中间件a，影响指定页面：' + to.path);
})

全局中间件，创建 cmid.global.ts：

javascript
复制代码export default defineNuxtRouteMiddleware((to, from) => {
  console.log('全局中间件c，影响所有页面');
})

效果如下：